<template>
  <div class='detailManage-table'>
    <el-table
      :data='tableDatas'
    >
      <el-table-column width="150" type='index' label='序号'/>


      <el-table-column label='通用角色名称' prop='name' width='200' />


      <el-table-column label='备注' prop='remark' min-width='300' />

  
     
      <el-table-column label='操作' width='260'>
        <template scope='scope'>
          <span class="opt-btn-sp"> 
            <a @click.stop='goToDetail(scope.row.id)'><i class="fa fa-database"></i>管理流程角色</a>
            <a @click.stop='openEdit(scope.row)'><i class="fa fa-edit"></i>修改</a>
            <a @click.stop='handleDel(scope.$index)'><i class="fa fa-remove"></i>删除</a>
          </span>   
        </template>
      </el-table-column>

    </el-table>



    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNum"
        :page-size="page.pageSize"
        :page-sizes="[10, 40, 100, 200,400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        />

     </div>

     <edit-dialog :editProp='editProp' :dialogVisible.sync='editDialog'/>

  </div>
</template>

<script>
import Vue from 'vue'
import Bus from './bus'
import { Pagination } from 'element-ui'
import { MessageBox, Message } from 'element-ui'
Vue.use(Pagination)
import EditDialog from './editDialog'
export default {
  components: {
    EditDialog
  },
  data () {
    return {
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      searchVal: '',
      tableDatas: [],
      editProp: {},
      refresh: 0,
      editDialog: false
    }
  },
  watch: {
    refresh (newValue, oldValue) {
      newValue && (this.getTableData())
    }
  },

  methods: {

    goToDetail (id) {
      this.$router.push({ path: '/backStageManager/rolesManage', query: { id } })
    },

    handleDel (i) {

      MessageBox.confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        const params = {
          id: this.tableDatas[i].id
        }

        this.Axios
          .Post('/wfConfAssigneeCommonRole/deleteCommonRole', params)
          .then((res) => {


            if (res.data.status == 1) {
              Message({
                type: 'success',
                message: res.data.message
              })
              this.tableDatas.splice(i, 1)
            }

          })

      }).catch(() => { });

    },


    openEdit (row) {
      this.editProp = row
      this.editDialog = true
    },

    handleSizeChange (val) {
      this.page.pageSize = val
      this.refresh++
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.refresh++
    },

    getTableData () {
      const params = {
        name: this.searchVal,
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize
      }

      this.Axios.Post('/wfConfAssigneeCommonRole/getCommonRole', params)
        .then((res) => {
          this.tableDatas = res.data.datas

          this.page.total = res.data.total
        })
    }
  },
  mounted () {
    this.getTableData()
    Bus.$on('refresh', (data) => {
      this.refresh = data
    })
    Bus.$on('searchVal', (data) => {
      this.searchVal = data
    })
  },
}
</script>

<style scoped>
.detailManage-table {
  padding: 0 20px 50px 20px;
}
.fenye {
  margin: 20px 0 0 -5px;
}

.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin: 5px 0;
  cursor: pointer;
}

.opt-btn-sp > a:last-of-type {
  background-color: #ec4758;
  border-color: #ec4758;
}

.opt-btn-sp .finshed {
  background-color: #f7ba2a;
  border-color: #f7ba2a;
  padding: 2px 14px;
}
</style>

<style>
.detailManage-table .fenye .el-pagination span {
  line-height: 24px !important;
}

.detailManage-table .fenye .el-pagination__total {
  padding-top: 3px;
}
</style>
